<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">播放计划管理</a>
                <a><cite>播放计划列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text"  name="pname" placeholder="请输入电影名称" autocomplete="off"  class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消预约</a>
    <!--<a class="layui-btn layui-btn-xskai" lay-event="permission">权限分配</a>-->
</script>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/xadmin.js"></script>
<script th:inline="none">
    layui.use(['table','form'],function() {
        var table = layui.table;
        var form = layui.form;
        table.render({
            id: 'listReload'
            , elem: '#test'
            , method: "get"
            , url: '/PlanOrderServlet?method=list'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 300]
            , toolbar: '#toolbarDemo'
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.msgcode, //解析接口状态
                    "msg": res.data.data == null ? "无数据展示" : res.msg, //解析提示文本
                    "count": res.data.data == null ? 0 : res.data.count, //解析数据长度
                    "data": res.data.data == null ? null : res.data.data //解析数据列表
                };
            }, request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'rows' //每页数据量的参数名，默认：limit
            }, cols: [[
                {title: '序号', align: 'center', type: "numbers"},
                {title: '预约用户名称', field: 'uname', align: 'center'},
                {title: '电影名称', field: 'pname', align: 'center'},
                {title: '预约日期', field: 'odate', align: 'center'},
                {title: '预约状态', field: 'status', align: 'center', align: 'center',templet: function(re){
                        if(re.status==1){
                            return "<span>预约成功</span>";
                        }else if(re.status==2){
                            return "<span>已取消预约</span>";
                        }
                    }},
                {title: '操作', toolbar: '#barDemo', align: 'center'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add'://新增角色
                    xadmin.open('新增', './add.jsp');
                    break;
            };
        });

        //监听提交
        form.on('submit(sreach)', function(data){
            //上述方法等价于
            table.reload('listReload', {
                where: { //设定异步数据接口的额外参数，任意设
                    pname: data.field.pname
                },page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
            return false;
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
             if(obj.event === 'del'){
                layer.confirm('确定要取消预约？',{
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: "/PlanOrderServlet?method=up",
                        type: "post",
                        data: {'id':data.id},
                        dataType : "json",
                        success: function (data) {
                            if (data.success) {
                                layer.alert(data.msg, {
                                    icon : 6
                                }, function() {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.msg, {
                                    icon : 2
                                });
                            }
                        },error: function (XmlHttpRequest, textStatus, errorThrown) {
                            layer.msg('error!', {icon: 2, time: 2000});
                        }
                    });
                })
            }
        });
    })
</script>

</html>
